<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/static/full.css" rel="stylesheet" type="text/css"/>
    <script src="/static/vue.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .container {
            position: relative;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            background: #5a6171;
        }

        .chat-box {
            position: relative;
            height: 420px;
            width: 750px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: #f1f1f1;
            border-radius: 20px;
            padding: 10px;
        }

        .chat-box-side {
            position: absolute;
            height: 100%;
            width: 25%;
            left: 0;
            top: 0;
            border-width: 0 1px 0 0;
            border-style: solid;
            border-color: #2a2a2a;
            padding: 10px;
        }

        .chat-box-show {
            position: absolute;
            height: 70%;
            width: 75%;
            left: 25%;
            top: 0;
            border-width: 0 0 0 1px;
            border-style: solid;
            border-color: #2a2a2a;
            padding: 5px;
            overflow-y: auto;
        }

        .chat-box-footer {
            position: absolute;
            height: 30%;
            width: 75%;
            left: 25%;
            top: 70%;
            border-width: 0 0 0 1px;
            border-style: solid;
            border-color: #2a2a2a;
            padding: 8px;
        }

        .textarea {
            width: 100%;
            height: 100%;
            resize: none;
        }

        .btn {
            position: absolute;
            right: 10px;
            bottom: 10px;
            height: 35px;
            min-height: 35px;
        }

        .avatar img {
            height: 40px;
            width: 40px;
        }

        .chat-box-side-user {
            border-style: solid;
            border-width: 4px;
            border-radius: 50%;
            border-color: #659bb4;
            width: 60%;
            margin: 0 auto;
        }

        .width-100 {
            width: 100%;
        }

        .text-align-center {
            text-align: center;
        }

        .chat-bubble {
            white-space: pre-line;
            word-break: break-all;
        }

        .countdown {
            margin-top: 10px;
            font-size: 2.25rem;
            font-weight: 800;
        }
    </style>
</head>
<body>
<div class="container" id="app" @keyup.ctrl.enter="ws_send">
    <div class="chat-box">
        <div class="chat-box-side">
            <div class="chat-box-side-user">
                <img src="/static/dog.png"/>
            </div>
            <div class="divider"></div>
            <div class="stats stats-vertical shadow width-100">
                <div class="stat width-100">
                    <div class="stat-title text-align-center">当前用户</div>
                    <div class="stat-value text-align-center">{{uid}}</div>
                </div>
                <div class="stat width-100">
                    <div class="stat-title text-align-center">频道人数</div>
<!--                    <div class="stat-value text-align-center">{{online}}</div>-->
                    <div class="countdown">
                        <span class="width-100 text-align-center" :style="{'--value': online}"></span>
                    </div>

                </div>
            </div>
        </div>
        <div class="chat-box-show">
            <div class="chat chat-end" v-for="data in messages" v-if="data.uid === uid">
                <div class="chat-image avatar">
                    <div class="w-10 rounded-full">
                        <img class="mask mask-circle chat-image-child" src="/static/user.png"/>
                    </div>
                </div>
                <div class="chat-header">
                    {{data.uid}}
                </div>
                <div class="chat-bubble">{{data.msg}}</div>
            </div>
            <div class="chat chat-start" v-else>
                <div class="chat-image avatar">
                    <div class="w-10 rounded-full">
                        <img class="mask mask-circle chat-image-child" src="/static/user.png"/>
                    </div>
                </div>
                <div class="chat-header">
                    {{data.uid}}
                </div>
                <div class="chat-bubble">{{data.msg}}</div>
            </div>
            <div ref="scroll"></div>
        </div>
        <label class="chat-box-footer">
            <textarea class="textarea" placeholder="请输入内容..." v-model="content"></textarea>
            <button class="btn" @click="ws_send">发送</button>
        </label>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                uid: '',
                online: 0,
                messages: [],
                content: '',
            }
        },
        updated(){
            this.$refs.scroll.scrollIntoView({
                block: 'end',
                behavior: 'smooth'
            });
        },
        mounted() {
            this.ws = new WebSocket("ws://127.0.0.1:8080/ws/chat");
            this.ws.onmessage = (ev) => {
                let json_data = JSON.parse(ev.data);
                if (json_data.type === 'init') {
                    this.uid = json_data.uid;
                } else if (json_data.type === 'online') {
                    this.online = json_data.online;
                } else if (json_data.type === 'broad') {
                    this.messages.push(json_data);
                }
            };
            this.ws.onclose = (ev) => {
                this.messages.push({uid: this.uid, msg: 'WebSocket后台服务已关闭!'});
            };
            this.ws.onopen = (ev) => {
                this.ws.send(JSON.stringify({'type': 'init'}));
            };
        },
        methods: {
            ws_send: function () {
                if (this.content) {
                    this.ws.send(JSON.stringify({type: 'broad', uid: this.uid, msg: this.content}));
                    this.content = '';
                }
            },
        },
    })
</script>
</body>
</html>